<template>

  <el-container>
    <el-header style="text-align: left; font-size: 12px">
      数组表格
      <el-button-group>
        <el-button type="primary" icon="el-icon-plus" @click="handlerAdd">增加</el-button>
   
      </el-button-group>
    </el-header>
    
    <el-main>
      <el-table :data="filterData">
        <el-table-column prop="id" label="编号" width="140" >
        </el-table-column>
        <el-table-column prop="date" label="日期" width="140" :formatter='dateFormat'>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column width="100">
            <template slot-scope="scope">
              <el-button @click="handlerEdit(scope.row)" type="primary" icon="el-icon-edit" >修改</el-button> 
           </template>
        </el-table-column>
        <el-table-column width="100">
            <template slot-scope="scope">
              <el-button @click="handlerDelete(scope.row)" type="danger" icon="el-icon-delete" >删除</el-button>
           </template>
        </el-table-column>
      </el-table>

    </el-main>
    <el-footer>
    <el-pagination ref="page"
        background
        layout="prev, pager, next"
        :total="tableData.length"  :page-size="pager.pagesize"  
                                   :current-page="pager.currentpage"  
                                   @current-change="PageChange">
      </el-pagination>  
    </el-footer>


  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
   >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="活动时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit"  icon="el-icon-upload">{{buttontitle}}</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
  </el-dialog>
</el-container>


</template>

<style>
  .container{

      border: 1px solid #eee;
      width:100%;
      height:100%;
  }


  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      
      return {
        tableData:[],
        filterData:[],
        dialogVisible:false,
        selectRow:null,
        isedit:false,
        buttontitle:'',
        form:{
            name:'',
            region:'',
            date:null,
            id:-1
        },
        item : {
          date:  Date.now(),
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        pager:{
            pagesize:5,
            currentpage:1
            
        }
      }
    },
    mounted(){

        for(let i=1;i<=10;i++)
        {
            const a=Object.assign({id:i},this.item)
            this.tableData.push(a)
        }
        this.handlerFilterdata(this.pager.currentpage)
    }
    ,
    methods:{
        handlerAdd() {
            this.isedit=false
            this.selectRow=null
            this.dialogVisible=true
            this.form.name=''
            this.form.address=''
            this.form.date=Date.now()
            this.form.id=this.tableData[this.tableData.length-1].id+1
            this.buttontitle='保存'            
        },
        handlerEdit(row) {
            this.isedit=true
            this.selectRow=row
            this.dialogVisible=true
            this.form.name=row.name
            this.form.address=row.address
            this.form.date=row.date
            this.form.id=row.id
            this.buttontitle='更新'
        },   
        messageShow(message){
            _this.$message({
              type: 'success',
              message: '删除成功!'
            });
        },
        confirmMessage(message){
            return  this.$confirm(message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
        }
        ,
        handlerDelete(row){
            const _this=this
            this.confirmMessage('是否删除').then(()=>{
              this.tableData.forEach(function(item,index){
                if(item.id === row.id){
                  _this.tableData.splice(index,1)
                  const pagelength=_this.getPageLength()
                  _this.handlerFilterdata(pagelength)
                  _this.pager.currentpage=pagelength
                  _this.messageShow('删除成功!')
                }
              })
            })
        },
        handlerFilterdata(val){
          this.$nextTick(function(){
              const start=(val-1)*5
              const end=(val)*5
              this.filterData= this.tableData.filter((item,index) => {
                return index>=start && index<end    
              })
          })
        },
        onSubmit(){
          if(this.isedit===true) {
            this.UpdateRow()
          } else {
            this.InsertRow()
          }
          this.dialogVisible=false
        },
        UpdateRow(){
          let _this=this
          this.tableData.forEach(function(item){
            if(item.id === _this.form.id){  
          
              item.name=_this.form.name
              item.address=_this.form.address
              item.date=_this.form.date
            }
          })
        },
        InsertRow(){
          const item=Object.assign({},this.form)
          this.tableData.push(item)
          const pagelength=this.getPageLength()
          if(pagelength>this.pager.currentpage)
          {
              this.pager.currentpage=pagelength
              this.handlerFilterdata(pagelength)
          } 
        },
        dateFormat(row, column) { 
          var date = row[column.property]; 
          if (date == undefined) { 
              return ""; 
          } 
          return this.$moment(date).format("YYYY-MM-DD HH a "); 
        } 
        ,
        PageChange(val){
          this.handlerFilterdata(val)
        }
        ,
        getPageLength(){
          const pagelength= Math.ceil(this.tableData.length/this.pager.pagesize)
          return pagelength 
        }
    }
  };
</script>